<template>
  <div class="goods-detail">
    <img :src="goods.mainPicUrl || defaultImage" alt="" />
    <div>
      <div class="goods-name">{{ goods.productName }}</div>
      <div class="goods-info">
        <div>上架类目：{{ goods.preview }}</div>
        <div>型号：{{ goods.modeCode }}</div>
        <div>分类：{{ goods.categoryName }}</div>
        <div>
          ID：{{ goods.productId }}
          <slot>
            <div class="area" v-if="goods.areaList" @click="emit('openArea', goods.productId)">
              运营区域：
              <template v-if="goods.areaList?.length">
                <el-tag type="primary">{{ goods.areaList[0]?.areaName }}</el-tag>
                <el-tag type="primary" v-if="goods.areaList[1]">{{ goods.areaList[1]?.areaName }}</el-tag>
              </template>
              <span v-else>--未设置--</span>
            </div>
          </slot>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
defineProps(['goods', 'defaultImage']);
import defaultImage from "@/assets/default.png";
const emit = defineEmits(['openArea'])
</script>

<style lang="scss" scoped>
.goods-detail {
  display: flex;
  gap: 20px;
  line-height: 2;
  width: 100%;
  align-items: center;

  img {
    min-width: 150px;
    max-width: 150px;
    height: 150px;
    border-radius: 4px;
  }

  >div {
    width: calc(100% - 180px);
  }

  .goods-name {
    width: 90%;
    font-size: 18px;
    color: #007dff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .goods-info {
    text-align: left;
    position: relative;
    width: 100%;

    .area {
      color: #007dff;
      cursor: pointer;
      position: absolute;
      bottom: 0;
      right: 0;

      .el-tag {
        margin-left: 8px;
      }
    }
  }
}
</style>